@import "vars";
.xdh-map-panel{
  position: absolute;
  border-radius: 0 0 10px 10px;
  border-bottom: 1px solid #ccc;
  transform: translate3d(calc(-50% + 40px), calc(-100% - 60px), 0);
  transition: all 0.5s;
  .box{
    position: relative;
    box-sizing: border-box;
    padding: 5px;
    min-width: 200px;
    min-height: 100px;
    border-radius: 10px;
    border: 1px solid #ccc;
    border-bottom: 0px solid black;
    background: white;
    z-index: 2;
  }
  .bottom-pin{
    position: absolute;
    bottom: -60px;
    left: calc(50% - 80px); 
    height: 60px; 
    width: 80px;
    pointer-events: none;
    &::after{
      content: '';
      display:block;
      margin-left: -40px;
      border-bottom: 30px solid white;
      border-left: 80px solid transparent;
      border-right: 80px solid transparent;
      transform: rotate(120deg) translate3d(-45px, -30px, 0);
    }
    img.shadow-pin{
      position: absolute;
      display: block;
      bottom: 8px;
      left: 26%;
    }
  }
  .shadow-warp{
    position: absolute;
    left: 12%;
    right: -45%;
    bottom: -23px;
    pointer-events: none;
    img.shadow{
      display: block;
      width: 100%;
    }
  }
}